<template>
    <div class="goods-list">
         <!-- <router-link class="goods-item" v-for="item in list" :key="item.id" :to="'/home/goodsinfo/'+ item.id" tag="div">
            <img :src="item.img_url" alt="">
            <h1 class="title">{{ item.title }}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">¥{{item.sell_price}}</span>
                    <span class="old">¥{{item.market_price}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{item.stock_quantity}}件</span>
                </p>
            </div>
         </router-link> -->
        <div class="goods-item" v-for="item in list" :key="item.id" @click="goDetail(item.id)">
            <img :src="item.img_url" alt="">
            <h1 class="title">{{ item.title }}</h1>
            <div class="info">
                <p class="price">
                    <span class="now">¥{{item.sell_price}}</span>
                    <span class="old">¥{{item.market_price}}</span>
                </p>
                <p class="sell">
                    <span>热卖中</span>
                    <span>剩{{item.stock_quantity}}件</span>
                </p>
            </div>
         </div>
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageIndex:0,
            list:[
                {
                    id:87,
                    title:'华为荣耀6Plus 16G双4G版',
                    add_time:'2021-3-21 15:30:28',
                    zhaiyao:'荣耀6 plus ,该机型为两种款号，荣耀1，荣耀2',
                    click:0,
                    img_url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa4.att.hudong.com%2F82%2F55%2F01300000349330124003555691086.jpg&refer=http%3A%2F%2Fa4.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615906799&t=e6edf4029597238a8ec2e8d25a990191',
                    sell_price:2195,
                    market_price:2499,
                    stock_quantity:60
                },
                {
                    id:88,
                    title:'小米6Plus 16G双4G版',
                    add_time:'2021-3-21 15:30:28',
                    zhaiyao: '小米6 plus ,该机型为两种款号，荣耀1，荣耀2',
                    click:2,
                    img_url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa1.att.hudong.com%2F57%2F92%2F01300542193590138063924441627.jpg&refer=http%3A%2F%2Fa1.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615906799&t=0fba252481f9f7d765e2fe451c4298dc',
                    sell_price:3195,
                    market_price:3499,
                    stock_quantity:50
                },
                {
                    id:89,
                    title:'三星6Plus 16G双4G版',
                    add_time:'2021-3-21 15:30:28',
                    zhaiyao: '三星6 plus ,该机型为两种款号，荣耀1，荣耀2',
                    click:2,
                    img_url:'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=ee07f1fac9fcc3ceb4c0c93ba244d6b7/130d8bfe9925bc31f5777c405fdf8db1ca13703c.jpg',
                    sell_price:4195,
                    market_price:4499,
                    stock_quantity:70
                },
                {
                    id:90,
                    title:'vivo 6Plus 16G双4G版',
                    add_time:'2021-3-21 15:30:28',
                    zhaiyao: 'vivo 6 plus ,该机型为两种款号，荣耀1，荣耀2',
                    click:5,
                    img_url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F16%2F12%2F01300535031999137270128786964.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615906799&t=11cda6a451b6d9fc25c727ee4a407e48',
                    sell_price:5195,
                    market_price:5499,
                    stock_quantity:71
                },
                {
                    id:91,
                    title:'oppo 6Plus 16G双4G版',
                    add_time:'2021-3-21 15:30:28',
                    zhaiyao: 'oppo 6 plus ,该机型为两种款号，荣耀1，荣耀2',
                    click:6,
                    img_url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa3.att.hudong.com%2F08%2F22%2F01300000013945118822221353308.jpg&refer=http%3A%2F%2Fa3.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615906799&t=168aac887690bf72a34b87b526b8a5bf',
                    sell_price:6195,
                    market_price:6499,
                    stock_quantity:72
                }
            ]
        }
    },
    created(){},
    methods:{
      getGoodsList(){

      },
      getMore(){
          this.pageIndex++;
          this.getGoodsList();
      },
      goDetail(id){
      //使用js形式路由导航
    //   this.$router.push("/home/goodsinfo/" + id);
        //  this.$router.push("/home/goodsinfo/" + id);
        this.$router.push({name:'goodsinfo',params:{id}});

      }
    }
    
}
</script>

<style lang="scss" scoped>
.goods-list{
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-between;
    .goods-item{
        width: 49%;
        border: 1px solid #ccc;
        box-shadow: 0 0 8px #ccc;
        margin: 3px 0;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 293px;
        img{
            width: 100%;
        }
        .title{
            font-size: 14px;
        }
        .info{
            background-color: #eee;
            p{
                margin: 0;
                padding: 5px;
            }
            .price{
                .now{
                    color: red;
                    font-weight: bold;
                    font-size: 16px;
                }
                .old{
                    text-decoration: line-through;
                    font-size: 12px;
                    margin-left: 12px;
                }
            }
            .sell{
                display: flex;
                justify-content: space-between;
                font-size: 12px;
            }
        }
    }
}
</style>